<template>
    <div class="roleManagement">
        <el-row style="text-align: right;margin: 10px 0px;">
            <el-col>
                <el-button type="success" @click="add">新疆角色</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="roleData" style="width: 100%" border>
                <el-table-column type="index" label="序号" width="200" align="center" :index="indexSort">
                </el-table-column>
                <el-table-column prop="roleName" label="角色名" align="center">
                </el-table-column>
                <el-table-column prop="updateDate" label="更新时间" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" style="cursor: pointer;" @click="updateRow(scope.row)" size="mini">
                            修改
                        </el-button>
                        <el-button type="text" style="cursor: pointer;" @click="deleteRow(scope.row)" size="mini">
                            删除
                        </el-button>
                        <el-button type="text" style="cursor: pointer;" @click="openMenu(scope.row)" size="mini">
                            菜单
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row style="text-align: right;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[15, 50, 100, 200]"
                :page-size="pageSize"
                layout="->, sizes, prev, pager, next, jumper, total"
                :total="totalElements"
            ></el-pagination>
        </el-row>
        <addOrEdit :type="type" :off.sync="addRoleDialog" :rowData="rowdata"></addOrEdit>
        <menuRole :off.sync="menuDialog" :rowData="rowdata"></menuRole>
    </div>    
</template>

<script>
    import { getRoleList, delRole } from "@/api/role.js"
    import * as util from "@/util/util.js"
    export default {
        name: "roleManagement",
        components: {
           "addOrEdit": () => import("./addOrEdit.vue"),
           "menuRole": () => import("./menuRole.vue"),
        },
        data(){
            return {
                type: "",
                pageSize: 15,
                currentPage: 1,
                totalElements: 0,
                totalPages: 1,
                roleData:[],
                addRoleDialog: false,
                rowdata: {},
                menuDialog: false,
                currentPageOne: false,
            }
        },
        created(){
            this.getRoleList();
        },
        methods: {
            add(){
                this.type = "add";
                this.addRoleDialog = true;
            },
            getRoleList(){
                 getRoleList({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                }).then(
                    res => {
                        console.log("res角色接口", res);
                        this.roleData = res.data.list;
                        this.roleData.forEach((e) => {
                            e.updateDate = util.timestampToTime(e.updateDate);
                        });
                        this.totalElements = res.data.total;
                        if(res.data.startRow == res.data.endRow){
                            this.currentPageOne = true;
                        }
                        // this.totalPages = this.totalElements / this.pageSize;
                    },
                    err => {}
                );
            },
            deleteRow(row){
                console.log(row);
                this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    center: true
                }).then(() => {
                    delRole(row.roleId).then(
                        res => {
                            this.$notify({
                                type: "success",
                                message: "删除成功"
                            });
                            if(this.currentPageOne){
                                this.currentPage = this.currentPage - 1;
                            }
                            this.getRoleList();
                        },
                        err => {}
                    );
                }).catch(() => {
                    this.$notify({
                        type: "info",
                        title: "错误",
                        message: "已取消删除",
                        offset: 150
                    });
                })
            },
            openMenu(row){
                console.log("row",row);
                this.rowdata = row;
                this.menuDialog = true;
            },
            updateRow(row){
                this.type = "edit";
                console.log("type", this.type);
                this.addRoleDialog = true;
                this.rowdata = row;
                this.rowdata.updateDate = new Date(this.rowdata.updateDate).getTime()
                console.log(this.rowdata.updateDate);
            },
            //序号
            indexSort(index) {
                if (this.currentPage > 1) {
                    index = (this.currentPage - 1) * this.pageSize + index + 1;
                } else {
                    index = index + 1;
                }
                return index;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getRoleList();
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getRoleList();
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style lang="less">
.roleManagement{
    .el-table__body, .el-table__header{
        width: 100% !important;
    }
}
</style>